<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
    <a-row :gutter="20">
      <a-col :span="24"  v-show="0">
        <a-form-item label="id" name="id">
          <a-input v-model:value="form.id" allow-clear  disabled="disabled" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="数据采集项:" name="title">
          <a-input v-model:value="form.title" allow-clear   disabled="disabled" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="所属病种名称:" name="diseaseName">
          <a-input v-model:value="form.diseaseName" allow-clear   :disabled="props.isUpdate" />
        </a-form-item>
      </a-col>

      <a-col :span="24">
<!--        <a-form-item label="默认值">
          <a-textarea v-model:value="form.defaltValue" placeholder="请输入默认值" :rows="4" />
        </a-form-item>-->
        <a-form-item v-if="form.useType=='input'" label="默认值" name="defaltValue">
          <a-input  v-model:value="form.defaltValue" allow-clear  />
        </a-form-item>
        <a-form-item v-if="form.useType=='number'" label="默认值" name="defaltValue">
          <a-input-number  v-model:value="form.defaltValue" allow-clear  style="width: 100%;"/>
        </a-form-item>

        <a-form-item v-if="form.useType=='date'" label="默认值" name="defaltValue">
          <a-date-picker  v-model:value="form.defaltValue"
                          :format="form.rule"
                          :valueFormat="form.rule"
                          :show-time="form.rule.length>10 "
                          style="width: 100%;"
          />
        </a-form-item>


        <a-form-item v-if="form.useType=='radio'" label="默认值" name="defaltValue">
          <a-radio-group v-model:value="form.defaltValue">
            <a-radio
                v-for="dict in form.dictList"
                :key="dict.dictCode"
                :value="dict.dictCode"
            >
              {{ dict.dictName }}
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="form.useType=='checkbox'" label="默认值" name="defaultValue">
          <a-checkbox-group v-model:value="form.defaultValue" >
            <a-checkbox :value="dict.dictCode" name="defaultValue"
                        @change="checkChange($event,form.submitName)"
                        v-for="dict in form.dictList" :key="dict.dictCode">{{
                dict.dictName
              }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <!--        :placeholder="form.title"-->
        <a-form-item v-if="form.useType=='select'" label="默认值" name="defaltValue">
          <a-select
              v-model:value="form.defaltValue"
              placeholder="请选择属性类型" allow-clear
          >
            <a-select-option
                v-for="dict in form.dictList"
                :key="dict.dictCode"
                :value="dict.dictCode"
            >
              {{ dict.dictName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.useType=='selects'" label="默认值" name="defaultValue">
          <a-select
              v-model:value="form.defaultValue"
              placeholder="请选择属性类型" allow-clear
              mode="multiple"
          >
            <a-select-option
                v-for="dict in form.dictList"
                :key="dict.dictCode"
                :value="dict.dictCode"
            >
              {{ dict.dictName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="备注">
          <a-textarea v-model:value="form.remark" placeholder="请输入备注" :rows="4" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="示例">
          <a-textarea v-model:value="form.example" placeholder="请输入示例" :rows="4" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup name="ConfigForm">
import { reactive } from 'vue';

const props = defineProps({
  // 表单数据
  form: Object,
  isUpdate: Boolean
});
const checkChange=  (el,data) => {
  if (el.target.checked) {
    if (props.form.defaultValues == null) {
      props.form.defaultValues = []
    }
    props.form.defaultValues.push(el.target.value)
    props.form.defaltValue = JSON.stringify(props.form.defaultValues)
  } else {
    let i = 0
    for (let n = 0; n < props.form.defaultValues.length; n++) {
      if (props.form.defaultValues[n] == el.target.value) {
        i = n;
      }
    }
    props.form.defaultValues.splice(i, 1)
    props.form.defaltValue = JSON.stringify(props.form.defaultValues)
  }
}
// 验证规则
const rules = reactive({
  configName: [{ required: true, message: '请输入配置名称', type: 'string', trigger: 'blur' }],
  configCode: [{ required: true, message: '请输入配置编码', type: 'string', trigger: 'blur' }],
  sysFlag: [{ required: true, message: '请选择是否是系统配置', type: 'string', trigger: 'change' }]
});
</script>

<style></style>
